<template>
  <div
    :class="['input-item','component-item',{'forbid-copy':data.config.forbidCopy}]"
    :style="{paddingLeft: data.config.labelWidth}"
  >
    <label
      class="component-label"
      :style="{width: data.config.labelWidth}"
    >{{data.config.labelName}}</label>
    <Input
      :style="{height: data.config.height}"
      :value="view ? value : data.value"
      :placeholder="data.config.placeholder"
      :disabled="data.config.disabled"
      :size="data.config.size"
      :type="data.config.type"
      :rows="data.config.rows"
      :maxlength="data.config.maxlength"
      :readonly="pageType==='result' ? true : false"
      @on-change="changeValue($event)"
      @copy.native="copy($event,true)"
      @paste.native="copy($event,true)"
      @contextmenu.native="copy($event)"
    />
  </div>
</template>

<script>
import { getSourceData } from '../common'
export default {
  props: ['data', 'index', 'file', 'view', 'pageType'],
  data () {
    return {
      value: ''
    };
  },
  watch: {
    'file.result': {
      handler () {
        this.dataHandle();
      }
    },
  },
  methods: {
    // 是否禁止复制
    copy (e, tip) {
      let { forbidCopy } = this.data.config;
      if (forbidCopy) {
        e.preventDefault();
        if (tip) {
          this.$Message.error('禁止复制')
        }
      } else {
        return true
      }
    },

    // 数据处理
    dataHandle () {
      this.value = ''
      if (this.file) {
        let { databinding, key } = this.data;
        let { isDefaultData, result } = this.file
        if (databinding) {
          try {
            if (isDefaultData) {
              let value = getSourceData(this.file, databinding);
              this.value = value;
              this.updateResult(this.value);
            } else {
              this.value = result[key]
              this.updateResult(this.value);
            }
          } catch (e) {
            console.log(e);
            this.$Message.error('数据获取出错');
          }
        }
      }
    },

    // 更新值
    updateResult (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    },

    // 数据更新
    changeValue (e) {
      let value = e.target.value;
      this.updateResult(value)
    }
  },
  created () {
    this.dataHandle();
  }
};
</script>

<style lang="less">
.input-item {
  .ivu-input,
  .ivu-input-inner-container {
    height: inherit !important;
  }
}
</style>

<style lang="less" scoped>
.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
.forbid-copy {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
